<script lang="ts" setup>
// eslint-disable-next-line ts/ban-ts-comment
// @ts-ignore
import VueResizable from 'vue-resizable'
import { ElMessage } from 'element-plus'
import { ArrowDown, CirclePlus, Refresh } from '@element-plus/icons-vue'
import { methodBgClass } from '~/utils/config'
import WorkspaceTableQueryParam from './table/queryParam.vue'
import WorkspaceTableBodyParam from './table/bodyParam.vue'

onMounted(() => {})

const record: any = ref(
  {
    response: '',
  },
)

// const methodList = [
//   { label: 'GET', value: 'GET' },
//   { label: 'POST', value: 'POST' },
//   { label: 'PUT', value: 'PUT' },
//   { label: 'DEL', value: 'DEL' },
// ]

const setting = ref({
  method: 'GET',
  url: '/api/ping',
  type: '1',
  json: '',
  authType: 'Bearer',
  authText: '',
})

function handleAtuh(type: string) {
  setting.value.authType = type
}

const tabList = [
  { key: 'param', name: '参数' },
  { key: 'body', name: '请求体' },
  { key: 'header', name: '请求头' },
  { key: 'auth', name: '授权' },
]
const activeTab = ref(tabList[0])
function handleTab(item: any) {
  activeTab.value = item
}

// query参数
const queryRef = ref()
const queryList: any = ref([])

function handleAddQuery() {
  queryRef.value.handleAdd()
}

function handleUpdateDesc() {
  ElMessage.success('更新成功')
}

function handleQueryChange(list: any) {
  queryList.value = list
}

// body参数
const bodyRef = ref()
const bodyList: any = ref([])

function handleAddBody() {
  bodyRef.value.handleAdd()
}

function handleBodyChange(list: any) {
  queryList.value = list
}

// header参数
const headerRef = ref()
const headerList: any = ref([])

function handleAddHeader() {
  headerRef.value.handleAdd()
}

function handleHeaderChange(list: any) {
  headerList.value = list
}

function handleDownload() {}
</script>

<template>
  <main class="mix-splitter h-full w-full">
    <header class="mb-2.5 flex items-center px-1">
      <div class="h-8 flex flex-1 items-center border-1 border-[#e1e1e1] rounded bg-[#f8f8f8] px-3">
        <span
          class="mr-2 h-5 flex items-center rounded px-1"
          :class="setting.method ? methodBgClass[setting.method.toLowerCase()] : ''"
        >
          {{ setting.method }}
        </span>
        <span class="text-xs color-[#171b1f]">{{ setting.url }}</span>
      </div>
      <div class="ml-2 flex items-center">
        <el-button-group class="mr-2 min-w-21 w-21">
          <el-button type="primary">
            发送
          </el-button>

          <el-dropdown>
            <el-button type="primary" :icon="ArrowDown" style="padding: 8px 4px;" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleDownload">
                  发送并下载
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button-group>
        <el-button>暂存</el-button>
        <el-button>保存为用例</el-button>
      </div>
    </header>
    <!--
    <section class="my-2 flex">
      <el-input v-model="setting.url" placeholder="">
        <template #prepend>
          <el-select v-model="setting.method" style="width: 120px">
            <el-option v-for="item in methodList" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </template>
      </el-input>

      <el-button-group class="mx-3 min-w-21 w-21">
        <el-button type="primary">
          发送
        </el-button>

        <el-dropdown>
          <el-button type="primary" :icon="ArrowDown" style="padding: 8px 4px;" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleDownload">
                发送并下载
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-button-group>
      <el-button>暂存</el-button>
      <el-button>保存为用例</el-button>
    </section>
    -->
    <section class="overflow-auto px-1" style="height: calc(100% - 40px);">
      <VueResizable :active="['b']" :height="320" :min-height="32">
        <section class="h-full overflow-hidden text-sm">
          <nav class="mb-2 h-8 w-57 flex items-center rounded bg-[#f6f6f6] px-2 text-sm">
            <template v-for="(item, index) in tabList" :key="index">
              <div
                class="header-item flex cursor-pointer items-center px-1.5 color-[#6e737b]"
                :class="{ active: activeTab.key === item.key }"
                @click="handleTab(item)"
              >
                <span>{{ item.name }}</span>
              </div>
            </template>
          </nav>
          <template v-if="activeTab.key === 'param'">
            <header class="relative mb-2 h-7 flex items-center justify-between">
              <div class="flex items-center color-[#171b1f]">
                <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
                <span>查询参数</span>
              </div>
              <div>
                <el-button link @click="handleAddQuery">
                  <el-tooltip effect="dark" content="添加" placement="top">
                    <el-icon size="18">
                      <CirclePlus />
                    </el-icon>
                  </el-tooltip>
                </el-button>
                <el-button link @click="handleUpdateDesc">
                  <el-tooltip effect="dark" content="更新描述" placement="top">
                    <el-icon size="18">
                      <Refresh />
                    </el-icon>
                  </el-tooltip>
                </el-button>
              </div>
            </header>
            <section class="w-full" style="height: calc(100% - 88px)">
              <WorkspaceTableQueryParam ref="queryRef" :list="queryList" @change="(val:any) => handleQueryChange(val)" />
            </section>
          </template>
          <template v-else-if="activeTab.key === 'body'">
            <header class="mb-2 h-7 flex items-center justify-between">
              <div class="flex items-center">
                <div class="mr-6 flex items-center color-[#171b1f]">
                  <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
                  <span>内容类型</span>
                </div>
                <el-radio-group v-model="setting.type">
                  <el-radio value="1">
                    form-data
                  </el-radio>
                  <el-radio value="2">
                    x-www-form-urlencoded
                  </el-radio>
                  <el-radio value="3">
                    json
                  </el-radio>
                </el-radio-group>
              </div>

              <div v-if="setting.type !== '3'">
                <el-button link @click="handleAddBody">
                  <el-tooltip effect="dark" content="添加" placement="top">
                    <el-icon size="18">
                      <CirclePlus />
                    </el-icon>
                  </el-tooltip>
                </el-button>
                <el-button link @click="handleUpdateDesc">
                  <el-tooltip effect="dark" content="更新描述" placement="top">
                    <el-icon size="18">
                      <Refresh />
                    </el-icon>
                  </el-tooltip>
                </el-button>
              </div>
            </header>
            <section v-if="setting.type === '1'" class="w-full" style="height: calc(100% - 88px)">
              <WorkspaceTableBodyParam ref="bodyRef" :is-file="true" :list="bodyList" @change="(val:any) => handleBodyChange(val)" />
            </section>
            <section v-else-if="setting.type === '2'" class="w-full" style="height: calc(100% - 88px)">
              <WorkspaceTableBodyParam ref="bodyRef" :is-file="false" :list="bodyList" @change="(val:any) => handleBodyChange(val)" />
            </section>
            <section v-else class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 88px)">
              <Json5Editor v-model="setting.json" />
            </section>
          </template>
          <template v-if="activeTab.key === 'header'">
            <header class="mb-2 h-7 flex items-center justify-between">
              <div class="flex items-center color-[#171b1f]">
                <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
                <span>请求头列表</span>
              </div>
              <div>
                <el-button link @click="handleAddHeader">
                  <el-tooltip effect="dark" content="添加" placement="top">
                    <el-icon size="18">
                      <CirclePlus />
                    </el-icon>
                  </el-tooltip>
                </el-button>
              </div>
            </header>
            <section class="w-full" style="height: calc(100% - 88px)">
              <WorkspaceTableQueryParam ref="headerRef" :list="headerList" @change="(val:any) => handleHeaderChange(val)" />
            </section>
          </template>
          <template v-if="activeTab.key === 'auth'">
            <header class="mb-2 h-7 flex items-center justify-between">
              <div class="flex items-center">
                <div class="mr-6 flex items-center color-[#171b1f]">
                  <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
                  <span>授权类型</span>
                </div>
                <el-dropdown>
                  <div class="flex items-center">
                    {{ setting.authType }}
                    <el-icon class="el-icon--right">
                      <ArrowDown />
                    </el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleAtuh('None')">
                        None
                      </el-dropdown-item>
                      <el-dropdown-item @click="handleAtuh('Bearer')">
                        Bearer
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </header>
            <section v-if="setting.authType === 'Bearer'" style="max-height: calc(100% - 88px)" class="w-full">
              <el-input
                v-model="setting.authText"
                style="width: 100%;height: 100%;"
                type="textarea"
                placeholder=""
              />
            </section>
            <section v-else style="max-height: calc(100% - 88px)" class="w-full border-0 border-[#e1e1e1] p-1" />
          </template>
        </section>
      </VueResizable>
      <VueResizable :active="['b']" :height="320" :min-height="32">
        <section class="mt-2 h-full overflow-hidden text-sm">
          <header class="mb-2 h-7 flex items-center justify-between">
            <div class="flex items-center color-[#171b1f]">
              <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
              <span>返回响应</span>
            </div>
          </header>
          <section class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 44px)">
            <JsonEditor v-model="record.response" language="json" />
          </section>
        </section>
      </VueResizable>
    </section>
  </main>
</template>

<style lang="scss" scoped>
@use '~/assets/splitpanes.scss';
@use '~/assets/custom.scss';
</style>
